<template>
  <div class="contain">
    <div class="item">
      <search-form
        ref="refSearch"
        :label-width="150"
        :search-config="[]"
        @clear="clearSearch"
        @search="handleSearch"
      >
        <div style="width:50%" class="qup-search-item">
          <el-form-item label="推荐上样门店:" size="mini" prop="shopCode">
            <el-select
              placeholder="请选择"
              :value="shopData"
              value-key="shopCode"
              @change="changeShop"
            >
              <el-option
                v-for="item in shopList"
                :key="item.shopCode"
                :label="item.shopName"
                :value="item"
              />
            </el-select>
          </el-form-item>
        </div>
        <div style="width:50%" class="qup-search-item">
          <el-form-item label="" size="mini" prop="shopCode">
            <el-button type="text" @click="handleShowSample"> 软体产品陈列与维护标准</el-button>
          </el-form-item>
        </div>
        <div class="qup-search-item">
          <el-form-item label="专区:" size="mini" prop="displayAreaCode">
            <el-radio-group v-model="formData.displayAreaCode" @change="changeDisplayArea(formData.displayAreaCode)">
              <el-radio
                v-for="item in displayAreaList"
                :key="item.displayAreaCode"
                :label="item.displayAreaCode"
              >{{ item.displayAreaName +item.displayAreaCode }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
        <div class="qup-search-item">
          <el-form-item label="产品定位:" size="mini" prop="totalNum">
            <el-radio-group v-model="formData.totalNum">
              <el-radio v-for="item in totalNumList" :key="item.name" :label="item.name">{{ item.name }}</el-radio>
            </el-radio-group>
            <!-- <el-button size="mini" type="text" @click="handleDetail(data)">查看</el-button> -->
          </el-form-item>
        </div>
      </search-form>
    </div>
    <div class="item">
      <el-button size="mini" type="primary" @click="handleExport()">导出</el-button>
      最近保存时间：{{ updateTime }}
      <table-box
        ref="refSaveTable"
        table-size="mini"
        :table-config="tableConfig"
        show-index
        no-request
        :table-height="400"
        :other-raw="params"
        :show-custom-setting="false"
        :other-filters="otherFilter"
        @data-change="dataChange"
        @btnOperate="btnOperate"
      >
        <el-table-column fixed="right" min-width="130" label="操作">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click.native="handleChange(scope.row)">替换</el-button>
            <el-button v-if="formData.displayAreaCode!=='ST006'&&formData.displayAreaCode!=='ST007'" size="mini" type="text" @click.native="previewMatchProducts(scope.row)">搭配产品</el-button>
          </template>
        </el-table-column>
      </table-box>
    </div>
    <el-dialog
      :title="activeCode"
      :visible.sync="dialogVisible"
      width="700px"
    >
      <detail-table v-if="dialogVisible" :convention-num="activeNumber" :shop-code="shopData.shopCode" :code="activeCode" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
    <select-form
      v-if="showSelectDlg"
      :relation-data="activeData"
      :params="params"
      :visible.sync="showSelectDlg"
      :other-filters2="otherFilter"
      @success="refreshTable"
    />
    <match-list
      v-if="showMatchDlg"
      :shop-data="shopData"
      :active-data="activeData"
      :visible.sync="showMatchDlg"
    />
    <sample-dlg v-if="showSample" :visible.sync="showSample" />

    <export-files v-if="exportVisible" title="导出" :config="exportConfig" :visible.sync="exportVisible" />
    <!-- 图片预览 -->
    <el-image-viewer
      v-if="imgDialogVisible"
      :on-close="handleCloseImg"
      :url-list="previewImgs"
    />
  </div>
</template>
<script>
import sampleDlg from './DisplaySampleDlg.vue'
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
import { getShopList } from '@/api/display/salesData'
import { queryMainData } from '@/api/display/recommend'
import selectForm from './selectForm'
import detailTable from './detailTable'
import matchList from './MatchListDlg'
export default {
  name: 'SavedList',
  components: { selectForm, detailTable, ElImageViewer, matchList, sampleDlg },
  data() {
    const that = this
    return {
      showSample: false,
      updateTime: '',
      exportVisible: false,
      imgDialogVisible: false,
      previewImgs: [],
      formData: {
        shopCode: '',
        shopName: '',
        sampleType: '',
        displayAreaName: '',
        totalNum: '全部',
        productSize: '',
        price: '',
        modelNumber: '',
        sortSampleType: ''
      },
      displayAreaList: [],
      productSizeList: [],
      displayAreaCategoryList: [],
      priceList: [],
      totalNumList: [],
      dataLoading: false,
      shopData: { shopCode: '', shopName: '', customerCode: '' },
      shopList: [], // { shopCode: 'K100176701', sampleType: '测试门店' }
      showSelectDlg: false,
      showMatchDlg: false,
      otherFilter: [],
      totalNumber: '-',
      activeFilter: { shopCode: '', sampleType: 'A' },
      params: {},
      activeCode: '',
      activeNumber: 0,
      dialogVisible: false,
      activeData: {},
      sortTypeList: [],
      tableConfig: {
        interfacePath: `${process.env.VUE_APP_BASE_API}/api/v1/displaySampleRankingRelation/savePage`,
        buttonGroupCode: 'default',
        hideSearchBar: true,
        tabIndex: 2,
        pageSize: 10,
        // order: 'desc',
        // sort: 'marketTime',
        // 表格字段动态配置
        setting: [
          {
            prop: 'pic',
            label: '产品主图',
            minWidth: '80',
            render: (h, data, row) => {
              const DomArr = [
                <div style='display:flex'>
                  <img
                    onClick={that.handlePreview.bind(this, data)}
                    src={'https://gcenterimg.quanyou.com.cn/' + data.pic}
                    height='50'
                    width='50'
                  >
                  </img>
                </div>
              ]
              return DomArr
            }
          },
          {
            prop: 'productName',
            label: '产品名称',
            minWidth: '160'
          },
          {
            prop: 'productLocation',
            label: '产品定位',
            minWidth: '90'
          },
          {
            prop: 'modelNumber',
            label: '型号',
            minWidth: '90'
          },
          {
            prop: 'marketTime',
            label: '上市时间',
            minWidth: '100'
          }
          // {
          //   prop: 'productSize',
          //   label: '尺寸',
          //   minWidth: '90'
          // },
          // {
          //   prop: 'price',
          //   label: '价格',
          //   minWidth: '90'
          // }
        ]
        // btnList: [
        //   {
        //     buttonName: '刷新',
        //     outerFlag: true,
        //     optCode: 'refresh'
        //   }
        // ]
      },
      visible: false
    }
  },
  computed: {
    exportConfig() {
      return [{
        code: 'export',
        name: '已保存上样清单',
        dataApi: '/slm-admin/api/v1/displaySampleRankingRelation/export/?type=0',
        selectedRows: [],
        paramsRaw: {},
        filtersRaw: this.otherFilter,
        queryField: 'id'
      }]
    }
  },
  mounted() {
    this.$refs.refSearch.toggleMore()
  },
  async created() {
    this.dataLoading = true
    getShopList().then(res => {
      if (res.success && res.data.length > 0) {
        this.shopList = res.data
        this.changeShop(this.shopList[0])
      } else {
        this.$message.warning('当前用户下没有门店')
        this.dataLoading = false
      }
    }).catch(() => {
      this.dataLoading = false
    })
    // getSpaceList().then(res => {
    //   this.displayAreaCategoryList = res.data || []
    // })
    // const { SAMPLE_TYPE } = await getDictByPatchType(['SAMPLE_TYPE'])
    // this.sortTypeList = SAMPLE_TYPE // 排序方式
  },
  methods: {
    handleShowSample() {
      this.showSample = true
    },
    handleExport() {
      this.exportVisible = true
    },
    dataChange(res) {
      if (res.data.records && res.data.records.length) {
        this.updateTime = res.data.records[0].createTime
      } else {
        this.updateTime = ''
      }
    },
    // 关闭图片预览
    handleCloseImg() {
      this.imgDialogVisible = false
    },
    handlePreview(data) {
      this.previewImgs = ['https://gcenterimg.quanyou.com.cn/' + data.pic]
      this.imgDialogVisible = true
    },
    clearSearch() {
      this.shopData = { shopCode: '', shopName: '', customerCode: '' }
      this.formData = {
        shopCode: '',
        shopName: '',
        sampleType: '',
        displayAreaName: '',
        totalNum: '全部',
        productSize: '',
        price: '',
        modelNumber: '',
        sortSampleType: ''
      }
    },
    handleSearch() {
      const filtersRaw = [
        { 'id': 'shopCode', 'property': 'shopCode', 'operator': '=', 'value': this.formData.shopCode || undefined },
        { 'id': 'displayAreaCode', 'property': 'displayAreaCode', 'operator': '=', 'value': this.formData.displayAreaCode }
      ]
      // if (this.formData.price) filtersRaw.push({ 'id': 'price', 'property': 'price', 'operator': '=', 'value': this.formData.price })
      // if (this.formData.productSize) filtersRaw.push({ 'id': 'productSize', 'property': 'productSize', 'operator': '=', 'value': this.formData.productSize })
      // if (this.formData.modelNumber) filtersRaw.push({ 'id': 'modelNumber', 'property': 'modelNumber', 'operator': 'like', 'value': this.formData.modelNumber })
      if (this.formData.totalNum && this.formData.totalNum !== '全部') filtersRaw.push({ 'id': 'productLocation', 'property': 'productLocation', 'operator': '=', 'value': this.formData.totalNum })
      // const { totalNum, conventionNum, imageNum, promotionNum, sortSampleType = this.formData.sortSampleType } = this.activeArea
      // const paramsRaw = { totalNum, conventionNum, imageNum, promotionNum, sortSampleType }
      this.otherFilter = filtersRaw
      // this.params = paramsRaw
      this.refreshTable()
    },
    changeDisplayArea(data) {
      // 专区改变时 改变推荐数量选值
      const temp1 = this.displayAreaList.filter(v => v.displayAreaCode === data)
      if (temp1.length) {
        this.totalNumList = [
          { name: '全部', code: temp1[0].totalNum },
          { name: '形象款', code: temp1[0].imageNum },
          { name: `常规款`, code: temp1[0].conventionNum },
          { name: '促销款', code: temp1[0].promotionNum }]
      }

      this.formData.totalNum = '全部'
    },
    // 按钮组
    btnOperate(flag) {
      switch (flag) {
        case 'refresh':
          this.refreshTable()
          break
        default:
          break
      }
    },
    changeShop(data) {
      this.shopData = { shopName: data.shopName || '', shopCode: data.shopCode, customerCode: data.customerCode }
      this.formData.shopCode = data.shopCode
      this.formData.shopName = data.shopName

      const otherFilters1 = [{ 'id': 'shopCode', 'property': 'shopCode', 'operator': '=', 'value': data.shopCode || undefined }]
      this.activeFilter.shopCode = data.shopCode
      if (this.shopList.length === 0) {
        this.$message.warning('当前用户下没有门店')
        return
      }
      this.dataLoading = true
      queryMainData(otherFilters1).then(res => {
        if (res.success && res.data.records.length > 0) {
          this.displayAreaList = res.data.records
          this.formData.displayAreaCode = this.displayAreaList[0].displayAreaCode
          this.totalNumList = [{ name: '全部', code: this.displayAreaList[0].totalNum }, { name: '形象款', code: this.displayAreaList[0].imageNum },
            { name: `常规款`, code: this.displayAreaList[0].conventionNum }, { name: '促销款', code: this.displayAreaList[0].promotionNum }]
          this.changeDisplayArea(this.displayAreaList[0].displayAreaCode)
        } else {
          this.displayAreaList = []
          this.formData.displayAreaCode = ''
          this.totalNumList = []
        }
        this.formData.totalNum = '全部'
        this.otherFilter = [
          { 'id': 'shopCode', 'property': 'shopCode', 'operator': '=', 'value': this.formData.shopCode || undefined },
          { 'id': 'displayAreaCode', 'property': 'displayAreaCode', 'operator': '=', 'value': this.formData.displayAreaCode }
        ]
        this.dataLoading = false
      }).catch(() => {
        this.dataLoading = false
      })
    },
    // 替换
    handleChange(data) {
      this.activeData = data
      this.showSelectDlg = true
    },
    // 查看搭配产品
    previewMatchProducts(data) {
      // if (data.productLocation === '常规款') {
      //   this.$message.warning('常规款暂不支持查看')
      //   return
      // }
      this.activeData = data
      this.showMatchDlg = true
    },
    handleDetail(data) {
      if (!data.displayAreaCode) return
      this.activeCode = data.displayAreaCode
      this.activeNumber = data.conventionNum
      this.dialogVisible = true
    },
    refreshTable() {
      if (this.shopList.length === 0) {
        this.$message.warning('当前用户下没有门店')
        return
      }
      this.$nextTick(() => {
        this.$refs.refSaveTable.initTableData()
      })
    },
    handleClear() {
      this.formData.price = ''
      this.formData.productSize = ''
      this.formData.modelNumber = ''
    },
    handleClick() {

    }
  }
}
</script>
<style lang="scss" scoped>
// /deep/.table-handelclick-text {
//   color: #3DC094;
//   cursor: pointer;
// }
// /deep/.el-radio__input {
//     display: none;
//     cursor: pointer;
//     vertical-align: middle;
// }
// /deep/.qup-search-form .qup-search-item .el-radio-group .el-radio {
//     border: 1px solid #3dc094;
//     padding-right: 5px;
//     border-radius: 3px;
//     line-height: 28px;
// }
// /deep/.qup-search-form .qup-search-item .el-radio__input.is-checked+.el-radio__label {
//     color: #fff;
// }
// /deep/label.el-radio.is-checked {
//     background-color: #3dc094;
//     color: #fff
// }

</style>
